<html>
<head>
    <title>菜单管理</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">
    <style>
        body {
            background: #F2F2F2;
        }

        .main-head {
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
            text-align: right;
        }

        .chart-outer {
            height: 200px;
        }
    </style>
</head>
<body>
<div class="page" id="page-monitor">
    <div class="page-title">菜单管理</div>
    <div class="page-main">
        <el-row>
            <el-col :span="24">
                <div class="main-head">
                    <el-button type="success" @click="addClick" style="">新增</el-button>
                </div>
                <el-table border stripe style="width: 100%" :data="tabData" row-key="value" default-expand-all="true">
                    <el-table-column prop="value" label="菜单ID" align="center">
                    </el-table-column>
                    <el-table-column prop="title" label="菜单名称" align="center">
                    </el-table-column>
                    <el-table-column prop="attributes.ParentID" label="父节点" align="center">
                    </el-table-column>
                    <el-table-column prop="attributes.ResponseUrl" label="菜单路径" align="center">
                    </el-table-column>
                    <el-table-column prop="OpenFlag" label="启用状态" align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.attributes.OpenFlag == '1'">
                                是
                            </div>
                            <div v-else-if="scope.row.attributes.OpenFlag == '0'">
                                否
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" round size="small"
                                       icon="el-icon-edit"></el-button>
                            <el-button round icon="el-icon-delete" size="small"
                                       @click="deleteClick(scope.row)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>

            </el-col>
        </el-row>
        <el-dialog :title="editMod?'编辑菜单':'新增菜单'"
                   :visible.sync="editFormVisible"
                   center
                   width="35%"
        >
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="菜单名称" prop="Name" :rules="[
                             {required:true,message:'名称不能为空!',trigger:'blur'}
                ]">
                    <el-input v-model="form.Name"></el-input>
                </el-form-item>
                <el-form-item label="父级菜单">
                    <el-cascader
                            v-model="form.pid"
                            :options="menuTree"
                            :show-all-levels="false"
                            :props="defaultProps"
                            :change-on-select="true"
                            filterable
                    ></el-cascader>
                </el-form-item>
                <el-form-item label="菜单路径" prop="Url">
                    <el-input v-model="form.Url"></el-input>
                </el-form-item>
                <el-form-item label="是否启用" prop="openFlag" :rules="[
                             {required:true,message:'不能为空!',trigger:'blur'}
                            ]">
                    <el-select v-model="form.openFlag" placeholder="--请选择--">
                        <el-option label="是" value="1"></el-option>
                        <el-option label="否" value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="菜单序号">
                    <el-input v-model="form.sortNo"></el-input>
                </el-form-item>
                <el-form-item label="菜单描述">
                    <el-input v-model="form.Description"></el-input>
                </el-form-item>
                <el-form-item style="text-align: center">
                    <el-button @click="cancelClick" style="background-color: #7eb8b0  ">取消</el-button>
                    <el-button @click="submitClick('form')" style="margin-left: 40px;background-color: #f9b317;">保存
                    </el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>

<script>

    var vuePage = new Vue({
        el: '#page-monitor',
        data: {
            editFormVisible: false,
            funName: '',
            tabData: [],
            menuTree: [],
            defaultProps: {
                label: 'title',
            },
            form: {},
            editMod: false
        },
        methods: {

            addClick: function (data) {
                this.form = {};
                this.editMod = false
                this.editFormVisible = true
            },
            handleClick(data) {
                this.form = {
                    Name: data.title,
                    Id: data.value,
                    parentID: data.attributes.ParentID,
                    Url: data.attributes.ResponseUrl,
                    openFlag: data.attributes.OpenFlag + '',
                    sortNo: data.attributes.SortNo,
                    pid: [data.attributes.ParentID],
                    Description: data.attributes.Description
                }
                this.editMod = true
                this.editFormVisible = true
            },
            cancelClick() {
                this.form = {}
                this.editFormVisible = false
            },
            deleteClick(data) {
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    HttpUtil.get('Menu/Delete', {Id: data.id}).success((res) => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.getMenuAll();
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            searchRole() {

            },
            submitClick(formName) {
                this.form.ParentID = this.form.pid[this.form.pid.length - 1];
                console.log(this.form);
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (this.editMod) {
                            HttpUtil.get('Menu/Update', this.form).success((res) => {
                                this.$message({
                                    type: 'success',
                                    message: '修改成功'
                                });
                                this.getMenuAll();
                                this.cancelClick();
                            })
                        } else {
                            HttpUtil.get('Menu/Add', this.form).success((res) => {
                                this.$message({
                                    type: 'success',
                                    message: '保存成功'
                                })

                            })
                            this.getMenuAll();
                            this.cancelClick();
                        }

                    } else {
                        this.$message({
                            type: 'error',
                            message: '输入内容不能为空'
                        })
                    }
                });
            },
            getMenuAll(params) {
                HttpUtil.get('menu/Descendant', params).success((res) => {
                    this.tabData = res.data;
                    this.menuTree = res.data;
                })
            },

        },
        created: function () {
            this.getMenuAll();
        },
        mounted: function () {
        }
    });


</script>

</body>
</html>
